<template>
  <div class="login">
    <div class="wrap">
      <p class="title">用户登录</p>
      <el-form :label-position="labelPosition" class="demo-ruleForm" ref="form" :model="form">
        <el-form-item
          label="用户名"
          prop="username"
          :rules="[
            { required: true, message: '用户名不能为空'},
           ]"
        >
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[
            { required: true, message: '密码不能为空'},
           ]"
        >
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-button type="primary" style="width:100%;" @click="login">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表单样式
      labelPosition: "top",
      form: {
        username: "admin",
        password: "123456"
      }
    };
  },
  methods: {
    //登陆方法
    login() {
      this.$http("login", this.form, "post").then(res => {
        this.$message({
          message: "登陆成功",
          type: "success"
        });
        this.$store.commit("setToken", res.data.token);
        setTimeout(() => {
          this.$router.push({
            name: "Home"
          });
        }, 1500);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgb(50, 65, 82);
  .wrap {
    width: 460px;
    height: 356px;
    background: #fff;
    position: fixed;
    left: 50%;
    margin-left: -230px;
    top: 50%;
    margin-top: -178px;
    border-radius: 5px;
    padding: 30px;
    .title {
      font-size: 24px;
      font-weight: bold;
    }
  }
}
</style>
